import { FC } from 'react'
import { useAppDispatch } from '../../store/hooks/redux.ts';
import { useNavigate } from 'react-router-dom';
import { useGetServiceByIdQuery } from '../../api/methods/serviceApi.ts';
import { useGetUserByEmployeeIdQuery } from '../../api/methods/userApi.ts';
import { setIdEmployee, setIdService, setNameEmployee, setNameService } from '../../api/slices/timeFormSlice.ts';
import { setPriceListIsOpen } from '../../api/slices/priceListModalSlice.ts';

interface ServiceCardProps {
    idService: number
    idEmployee: number
    title: string
}

export const ServiceCard: FC<ServiceCardProps> = (props) => {
    const dispatch = useAppDispatch()
    const navigate = useNavigate();
    const { data: serviceData } = useGetServiceByIdQuery({idService: props.idService})
    const {data: employeeData} = useGetUserByEmployeeIdQuery({idEmployee: props.idEmployee})

    const handleClick = () => {
        if(serviceData && employeeData){
            dispatch(setIdService(serviceData.idService))
            dispatch(setIdEmployee(employeeData.idEmployee))
            dispatch(setNameService(serviceData.title))
            dispatch(setNameEmployee(`${employeeData.surname} ${employeeData.name} ${employeeData.patronymic}`))
            dispatch(setPriceListIsOpen(false))
            navigate('/time')
        }
    }

    return (
        <div className="service" onClick={handleClick}>
            {props.title}
        </div>
    );
};
